<template>
  <div class="tods">
    <h1 class="tod">todos</h1>
    <input
      type="text"
      style="background: white"
      v-model="puts"
      placeholder="What needs to be done?"
      class="input"
      @keyup.enter="dian"
    />
    <div class="llo">
      <ol>
        <li v-for="(item, index) in lista" :key="index">
            <input type="checkbox" @click="check(index)" v-model="item.checked">
            {{ item.name }}
        </li>
      </ol>
    </div>
    <div class="tos">
      <span>数量</span>
      <span class="span">
        <button :class="{active:active==1}" @click="All(1)">All</button>
        <button :class="{active:active==2}" @click="Active(2)">Active</button>
        <button :class="{active:active==3}" @click="Component(3)">Component</button>
      </span>
      <span @click="kong">清空</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const puts = ref();
const list = ref([]);
const lista = ref(JSON.parse(localStorage.getItem("list")) || []);
const active=ref('0')


const dian = () => {
  list.value.push({name:puts.value,checked:true});
  console.log(puts.value);
  localStorage.setItem("list", JSON.stringify(list.value));
};


const check=(i)=>{
    

    console.log(i);
    lista.value[i].checked=!lista.value[i].checked
    localStorage.setItem("list", JSON.stringify(lista.value));
}

const kong = (a) => {

  localStorage.removeItem('list')
};

const All = (a) => {
    active.value=a
  router.push("/all");
};
const Active = (a) => {
    active.value=a
  router.push("/active");
};
const Component = (a) => {
    active.value=a
  router.push("/component");
};
</script>

<style lang="scss" scoped>
.tods {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  .tod {
    color: rgba(175, 47, 47, 0.15);
    // font-weight: 100;
    font-size: 100px;
  }
  .input {
    width: 80%;
    padding: 16px 16px 16px 60px;
    border: none;
    box-shadow: 0px 7px 10px 1px;
    font-size: 24px;
    outline: none;
  }
  .tos {
    width: 80%;
    background-color: white;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .span {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 10px;
      .active{
        width: 30px;
        border-radius:4px ;
        border: 1px red solid;
      }
      button {
        border: none;
        background: white;
      }
    }
  }
  .llo {
    width: 80%;
    background-color: white;
    ol{
        list-style: none;
    }
  }
}
</style>